<template>
  <div class="vantagens">
    <h3>{{ $t("language.business.setitle") }}</h3>
    <span>{{ $t("language.business.sett1") }}</span>
    <p>{{ $t("language.business.setext1") }}</p>
    <span>{{ $t("language.business.sett2") }}</span>
    <p>{{ $t("language.business.setext2") }}</p>
    <span>{{ $t("language.business.sett3") }}</span>
    <p>{{ $t("language.business.setext3") }}</p>
    <img v-lazy="getImg('bb6.png')" alt="" />
  </div>
</template>

<script setup lang="ts">
const getImg = (url) => {
  return new URL(`../../../assets/img/${url}`, import.meta.url).href;
};
</script>

<style scoped lang="scss">
.vantagens {
  position: relative;
  color: #fff;
  width: 100%;
  h3 {
    font-size: 20px;
    color: #fff;
    margin-bottom: 20px;
  }
  p {
    width: 100%;
    height: 36px;
    @include flex(row, flex-start, center);
    font-size: 12px;
    border-radius: 18px;
    color: #b5bacb;
    margin: 6px 0 25px 0;
  }
  span {
    font-size: 14px;
    color: #b5bacb;
  }
  img {
    width: 80%;
    display: block;
    margin: 80px auto 0;
  }
}
</style>
